<template>
    <div class="task-detail-wrapper">
        <div class="task-detail-card">
            <el-descriptions border column="1" direction="vertical" size="large">
                <el-descriptions-item label="父任务ID" v-if="detail.parent_id">{{ detail.parent_id
                }}</el-descriptions-item>
                <el-descriptions-item label="标题">{{ detail.title }}</el-descriptions-item>
                <el-descriptions-item label="描述" v-if="detail.description">{{ detail.description
                }}</el-descriptions-item>
                <el-descriptions-item label="优先级">{{ detail.priorityLabel }}</el-descriptions-item>
                <el-descriptions-item label="任务状态">{{ detail.statusLabel }}</el-descriptions-item>
                <el-descriptions-item label="更新时间" v-if="detail.updated_at">{{ formatDate(detail.updated_at)
                }}</el-descriptions-item>
            </el-descriptions>

            <el-table :data="subTasks" class="subtask-table" v-if="subTasks.length != 0">
                <el-table-column prop="id" label="子任务ID" header-align="center" align="center">
                    <template #default="{ row }">
                        <el-link type="primary" :underline="true" @click="jumpSubTask(row.id)">
                            {{ row.id }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" header-align="center" align="center" />
                <el-table-column prop="description" label="描述" header-align="center" align="center" />
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getTaskDetailAPI } from '@/api/task'

const route = useRoute()
const router = useRouter()

// 用 computed 包装，确保 id 是响应式的
const id = computed(() => Number(route.params.id))

const detail = ref<any>({})
const subTasks = ref<any[]>([])

const statusMap = {
    pending: '待办',
    working: '进行中',
    completed: '已完成',
    archived: '已归档',
}

const priorityMap = {
    high: '高',
    medium: '中',
    low: '低',
}

const formatDate = (dateStr: string) => {
    if (!dateStr) return ''
    const date = new Date(dateStr)
    const pad = (n: number) => n.toString().padStart(2, '0')
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}

const fetchDetail = async () => {
    detail.value = {}
    subTasks.value = []
    const res = await getTaskDetailAPI(id.value) // 使用 id.value
    detail.value = {
        ...res,
        priorityLabel: priorityMap[res.priority as keyof typeof priorityMap] || res.priority,
        statusLabel: statusMap[res.status as keyof typeof statusMap] || res.status,
    }
    subTasks.value = detail.value.sub_tasks || []
}

const jumpSubTask = (subId: number) => {
    router.push(`/harborSpace/trace/task/${subId}`)
}

// 监听 id 的变化以刷新数据
watch(() => route.params.id, () => {
    fetchDetail()
})

// 初始加载
onMounted(() => {
    fetchDetail()
})
</script>

<style scoped>
.task-detail-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100%;
    background: transparent;
}

.task-detail-card {
    width: 100%;
    background: #fff;
    padding: 32px 32px 24px 32px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.subtask-table {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
}
</style>
